<template>
  <div class="node-edit-box" v-show="visible">
    <div class="header">
      <span>节点编辑</span>
      <i class="close-icon" @click="handleClose">×</i>
    </div>
    <div class="content">
      <!-- 通用属性编辑 -->
      <div v-if="nodeData.image" class="section">
        <h3>图片属性</h3>
        <div class="form-item">
          <label>图片地址：</label>
          <el-input v-model="nodeData.image['xlink:href']" />
        </div>
      </div>

      <div v-if="nodeData.label" class="section">
        <h3>文本属性</h3>
        <div class="form-item">
          <label>文本内容：</label>
          <el-input v-model="nodeData.label.text" />
        </div>
        <div class="form-item">
          <label>字体大小：</label>
          <el-input v-model="nodeData.label.fontSize" />
        </div>
        <div class="form-item">
          <label>字体颜色：</label>
          <el-input v-model="nodeData.label.fill" />
        </div>
      </div>

      <div v-if="nodeData.rect" class="section">
        <h3>矩形属性</h3>
        <div class="form-item">
          <label>颜色：</label>
          <el-input v-model="nodeData.rect.stroke" />
        </div>
        <div class="form-item">
          <label>宽度：</label>
          <el-input v-model="nodeData.rect.strokeWidth" />
        </div>
        <div class="form-item">
          <label>背景色：</label>
          <el-input v-model="nodeData.rect.fill" />
        </div>
      </div>

      <div class="button-group">
        <el-button plain type="primary" @click="saveChanges">保存</el-button>
        <el-button plain type="info" @click="handleClose">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
const nodeData = reactive({});
const props = defineProps({
  /**
   * @description 是否显示编辑框
   * @type {Boolean}
   * @default false
   */
  visible: {
    type: Boolean,
    default: false,
  },
  /**
   * @description 当前编辑的节点数据
   * @type {Object}
   * @default null
   */
  node: {
    type: Object,
    default: null,
  },
});

const emit = defineEmits(["update:visible", "close"]);

const saveChanges = () => {
  console.log(nodeData);

  emit("setNodedata", props.node, nodeData);
};

/**
 * @description 关闭编辑框
 */
const handleClose = () => {
  emit("update:visible", false);
  emit("close");
};

const reset_nodeData = () => {
  for (const key in nodeData) {
    delete nodeData[key];
  }
};

watch(
  () => props.node,
  (newValue) => {
    console.log(newValue);
    let attrs = newValue.attrs;
    reset_nodeData();
    for (const key in attrs) {
      console.log(key);
      nodeData[key] = attrs[key];
    }
    console.log(nodeData);
  }
);
</script>

<style lang="scss" scoped>
.node-edit-box {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;

    span {
      font-weight: bold;
      font-size: 16px;
    }

    .close-icon {
      cursor: pointer;
      font-size: 18px;
      &:hover {
        color: #f56c6c;
      }
    }
  }

  .content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;

    .section {
      margin-bottom: 20px;

      h3 {
        margin-bottom: 12px;
        font-size: 14px;
        color: #606266;
      }
    }

    .form-item {
      margin-bottom: 12px;

      label {
        display: block;
        margin-bottom: 5px;
        font-size: 13px;
        color: #606266;
      }

      input,
      select,
      textarea {
        width: 100%;
        padding: 8px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        box-sizing: border-box;

        &:focus {
          outline: none;
          border-color: #409eff;
        }
      }

      textarea {
        min-height: 80px;
        resize: vertical;
      }

      .custom-attr {
        display: flex;
        gap: 8px;

        input {
          flex: 1;
        }

        .delete-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          cursor: pointer;
          color: #f56c6c;
          font-weight: bold;
        }
      }
    }

    .add-btn {
      width: 100%;
      padding: 6px;
      background: #ecf5ff;
      color: #409eff;
      border: 1px dashed #b3d8ff;
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        background: #d9ecff;
      }
    }
  }
}
</style>
